<template>
	<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
		<div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	const delta = 15

	export default {
		name: 'scrollBar',
		data() {
			return {
				top: 0
			}
		},
		methods: {
			handleScroll(e) {
				const eventDelta = e.wheelDelta || -e.deltaY * 3
				const $container = this.$refs.scrollContainer
				const $containerHeight = $container.offsetHeight
				const $wrapper = this.$refs.scrollWrapper
				const $wrapperHeight = $wrapper.offsetHeight
				if (eventDelta > 0) {
					this.top = Math.min(0, this.top + eventDelta)
				} else {
					if ($containerHeight - delta < $wrapperHeight) {
						if (this.top < -($wrapperHeight - $containerHeight + delta)) {
							this.top = this.top
						} else {
							this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
						}
					} else {
						this.top = 0
					}
				}
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '../../styles/variables.scss';

	.scroll-container {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: $menuBg;

		.scroll-wrapper {
			position: absolute;
			width: 100% !important;
		}
	}
</style>